﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 5px;
        }
    </style>

    <script src="scripts/jquery-1.7.1.js"></script>
    <script>
        $(document).ready(function () {
        });
        // //RETRIEVE ALL
        function GetAllCustomers() {

            $("#Customers tr").remove();
            $('<tr><th><b>First Name</b></th><th><b>Last Name</b></th><th><b>Email</b></th><th><b>Phone</b></th><th><b>Gender</b></th></tr').appendTo('#Customers');

            $.ajax({
                type: "GET",
                url: "http://192.168.0.104:4567/CustomerService.svc/Customers/",
                contentType: "json",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, value) {
                        //stringify
                        var jsonData = JSON.stringify(value);
                        //Parse JSON
                        var objData = $.parseJSON(jsonData);
                        var firstName = objData.FirstName;
                        var lastName = objData.LastName;
                        var email = objData.Email;
                        var phone = objData.Phone;
                        var gender = objData.Gender;
                        $('<tr><td>' + firstName + '</td><td>' + lastName + '</td><td>' + email + '</td><td>' + phone + '</td><td>' + gender + '</td></tr>').appendTo('#Customers');
                    });
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        }

        //RETRIEVE
        function GetCustomerByName() {

            $("#Customers tr").remove();
            $('<tr><th><b>First Name</b></th><th><b>Last Name</b></th><th><b>Email</b></th><th><b>Phone</b></th><th><b>Gender</b></th></tr').appendTo('#Customers');
            var name = $("#Id").val().trim();

            $.ajax({

                type: "GET",
                url: "http://192.168.0.104:4567/CustomerService.svc/CustomerByName/" + name,
                contentType: "json",
                dataType: "json",
                success: function (data) {
                    //stringify
                    var jsonData = JSON.stringify(data);
                    //Parse JSON
                    var objData = $.parseJSON(jsonData);
                    var firstName = objData.FirstName;
                    var lastName = objData.LastName;
                    var email = objData.Email;
                    var phone = objData.Phone;
                    var gender = objData.Gender;
                    $('<tr><td>' + firstName + '</td><td>' + lastName + '</td><td>' + email + '</td><td>' + phone + '</td><td>' + gender + '</td></tr>').appendTo('#Customers');
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        }

        //CREATE
        function AddNewCustomer() {
            var address = [{
                "Pincode": "560076",
                "NickID": "CurrentAddress",
                "IsDefault": true,
                "Street": "Omkar Court Apts",
                "LandMark": "Arekere",
                "City": "Bangalore"
            }];
            var customerData = {
                "FirstName": "Brajesh",
                "LastName": "Kumar",
                "Email": "Brajesh@JustCleanIt.in",
                "Password": "xyz",
                "Phone": "9876543210",
                "Gender": 0,
                "Address": address
            };
            $.ajax({
                type: "PUT",
                url: "http://192.168.0.104:4567/CustomerService.svc/AddCustomer/0",
                data: JSON.stringify(customerData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (data, status, jqXHR) {
                    alert("success…" + data);
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        }


        //UPDATE
        function UpdateCustomer() {

            var address = [{
                "Pincode": "560076",
                "NickID": "UpdatedAddress",
                "IsDefault": true,
                "Street": "PG",
                "LandMark": "BTM",
                "City": "Bangalore"
            }];

            var customerData = {
                "FirstName": "Ragini",
                "LastName": "Ravikant Kumar",
                "Email": "Ragini@JustCleanIt.in",
                "Password": "xyz",
                "Phone": "9876543222",
                "Gender": 1,
                "Address": address
            };
            $.ajax({
                type: "PUT",
                url: "http://192.168.0.104:4567/CustomerService.svc/UpdateCustomer/Ragini",
                data: JSON.stringify(customerData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (data, status, jqXHR) {
                    alert("success…" + data);
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        }


        //DELETE
        function DeleteCustomer() {
            $.ajax({
                type: "DELETE",
                url: "http://192.168.0.104:4567/CustomerService.svc/DeleteCustomer/Ragini",
                contentType: "json",
                dataType: "json",
                success: function (data) {
                    alert("successs…. " + data);
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        }

        //RETRIEVE
        function CheckCustomer() {

            var email = $("#TextCheckEmail").val().trim();

            $.ajax({

                type: "PUT",
                url: "http://192.168.0.104:4567/CustomerService.svc/CheckCustomerExist/" + email,
                contentType: "json",
                dataType: "json",
                success: function (data) {
                    $('#divCheckEmailResponse').html(data);
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        }

    </script>
</head>
<body>
    <table id="Customers" bgcolor="LightGreen">
        <!– Make a Header Row –>
        <tr>
            <th><b>First Name</b></th>
            <th><b>Last Name</b></th>
            <th><b>Email</b></th>
            <th><b>Phone</b></th>
            <th><b>Gender</b></th>
        </tr>
    </table>

    <br />

    <input type="button" id="ButtonGetAllCustomers" onclick="GetAllCustomers()" value="Get All Customers" />

    <br />

    <input id="Id" type="text" /><br />
    <input type="button" id="ButtonGetCustomerByName" onclick="GetCustomerByName()" value="Get Customer By Name" />

    <br />

    <input type="button" id="ButtonAddNewCustomer" onclick="AddNewCustomer()" value="Add New Customer" />

    <br />

    <input type="button" id="ButtonUpdateCustomer" onclick="UpdateCustomer()" value="Update Customer" />

    <br />

    <input type="button" id="ButtonDeleteCustomer" onclick="DeleteCustomer()" value="Delete Customer" />

    <br />
    <input id="TextCheckEmail" type="text" /><br />
    <input type="button" id="ButtonCheckUser" onclick="CheckCustomer()" value="Check Customer" />

    <div id="divCheckEmailResponse">
    </div>
    <br />

</body>
</html>
